<template>
  <a-drawer height="80%" placement="bottom" v-model:visible="visible" :title="title" @before-ok="onOk">
    <a-row justify="center">
      <a-col :span="12">
        <a-form ref="formRef" :model="form" size="medium" auto-label-width>
          <a-form-item label="群头像" field="pic">
            <MsUpload v-model="form.pic"></MsUpload>
          </a-form-item>
          <a-form-item
            label="群名称"
            field="name"
            :rules="[{ required: true, message: '请输入群名称' }]"
            :validate-trigger="['change', 'input', 'blur', 'focus']"
          >
            <a-input placeholder="请输入群名称" v-model="form.name" allow-clear></a-input>
          </a-form-item>
          <a-form-item
            label="圈编号"
            field="uuid"
            :rules="[{ required: true, message: '请输入圈编号' }]"
            :validate-trigger="['change', 'input', 'blur', 'focus']"
            v-if="!form.createdAt"
          >
            <a-input placeholder="请输入圈编号" v-model="form.momentNo" allow-clear></a-input>
          </a-form-item>
          <a-form-item label="标签" field="label">
            <a-input-tag placeholder="请输入标签" v-model="form.label" allow-clear auto-size></a-input-tag>
          </a-form-item>
          <a-form-item field="sort" label="排序">
            <a-input-number
              v-model="form.sort"
              :style="{ width: '100px' }"
              placeholder="请输入"
              class="input-demo"
              :min="0"
              :max="100"
            />
          </a-form-item> </a-form></a-col
    ></a-row>
  </a-drawer>
</template>
<script setup>
// import { uploadImage, uploadVideo } from '@/apis'
// defineOptions({ name: 'MsUpload' })
import { reactive, ref, provide, computed } from 'vue'
import { momentUpdate, momentCreate } from '@/apis'
import { reAssign } from '@/utils/common'
import { Message } from '@arco-design/web-vue'
defineOptions({ name: 'groupEdit' })
const emit = defineEmits(['getTableData'])
const title = computed(() => (form.createdAt ? '编辑' : '新增'))
const formRef = ref()
const visible = ref(false)
const form = reactive({
  sourceChatRoomId: 0,
  appId: 1,
  name: '',
  uuid: '',
  sortSelf: 0,
  sort: 0,
  // isPush: 0,
  // allowPushAt: 0,
  // expirePushAt: 0,
  // enabled: 0,
  pic: '',
  type: '',
  introduce: '',
  label: [],
  createdAt: '',

  momentId: '' //发圈源头ID
})
// console.log(route.query)
// const detailInfo = JSON.parse((route.query && route.query.detailInfo) || '{}')
// if (route.query.detailInfo) {
//   reAssign(form, detailInfo)
//   form.isPush = detailInfo.isPush ? 1 : 0
//   form.enabled = detailInfo.enabled ? 1 : 0
//   detailInfo.value && formRef.value?.validate()
//   console.log(detailInfo)
// }
// 打开编辑框并回显表单值
const addOrEdit = (item) => {
  reAssign(form, item)
  form.isPush = item.isPush ? 1 : 0
  form.enabled = item.enabled ? 1 : 0
  form.appId = item.appId ? item.appId : 1
  item && formRef.value?.validate()
  visible.value = true
}
const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  const api = form.createdAt ? momentUpdate : momentCreate
  await api(form)
  Message.success('操作成功')
  emit('getTableData')
  return true
}

defineExpose({ addOrEdit })
provide('formRef', formRef)
</script>
<style lang="scss" scoped>
.edit_wrap {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
